<template>
    <div class="page-container">
        <div class="images">
            <div class="menu">
                <div class="loading" v-show="loading">加载中</div>
                <div class="empty" v-show="total <= 0 && !loading">没有数据</div>
                <a-upload
                    name="avatar"
                    :show-upload-list="false"
                    @change="handleLogoChange"
                    :customRequest="() => {}"
                >
                    <a-button v-show="!loading">上传</a-button>
                </a-upload>
            </div>
            <div
                class="image-item"
                v-for="(v, k) in list"
                :key="k"
            >
                <div class="body">
                    <div
                        class="image"
                        :style="{backgroundImage: `url('/source/${v.id}')`}"
                        @click="onImageClick(v)"
                    ></div>
                </div>
            </div>
        </div>
        <a-pagination
            class="pagination"
            size="small"
            :total="total"
            v-model="page"
            :pageSize="limit"
            hideOnSinglePage
            @change="getSourceList"
            :item-render="(current, type, originalElement) => {
                if (['prev', 'next'].includes(type)) {
                    return '';
                } else {
                    return originalElement;
                }
            }"
        />

        <a-modal
            :title="null"
            :visible="preview.show"
            :closable="false"
            width="100%"
            :dialog-style="{ top: '0', height: '100%' }"
        >
            <div class="preview">
                <div
                    class="preview-image"
                    :style="{backgroundImage: `url('/source/${preview.id}')`}"
                ></div>
                <div class="preview-base64">
                    <a-input v-model="preview.url" disabled></a-input>
<!--                    <a-button class="copybtn">复制</a-button>-->
                </div>
            </div>
            <template #footer>
                <div>
                    <a-button @click="deleteImage" type="danger">删除</a-button>
                    <a-button @click="preview.show = false" type="primary">确认</a-button>
                </div>
            </template>
        </a-modal>
    </div>
</template>

<script>
import { getSourceList, deleteSource } from '@/api/source'
import {getBase64} from "../../../utils/source";
import {upload} from "../../../api/source";
export default {
    name: "Image",
    data() {return {
        list: [],
        page: 1,
        limit: 20,
        total: 0,
        preview: {
            show: false,
            id: '',
            url: ''
        },
        loading: false
    }},
    mounted() {
        this.getSourceList()
    },
    methods: {
        handleLogoChange(e) {
            if (e.file.status == 'uploading') {
                getBase64(e.file.originFileObj, img => {
                    upload({base64: img}).then(res => {
                        this.$message.success('上传成功')
                        this.page = 1
                        this.getSourceList()
                    }).catch(e => {
                        this.$message.success('上传失败')
                        console.error(e)
                    })
                })
            }
        },
        deleteImage() {
            this.$confirm({
                title: '确认删除',
                content: '删除后，被引用的位置都将无法显示此图片',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                    deleteSource({id: this.preview.id}).then(res => {
                        this.getSourceList()
                        this.preview = {
                            show: false,
                            id: '',
                            url: ''
                        }
                        this.$message.success('删除成功')
                    })
                }
            });
        },
        onImageClick(v) {
            this.preview = {
                show: true,
                url: `${window.location.origin}/source/${v.id}`,
                base64: v.base64,
                id: v.id
            }
        },
        getSourceList() {
            this.loading = true
            getSourceList({
                page: this.page,
                limit: this.limit
            }).then(res => {
                this.loading = false
                this.total = res.data.count
                this.list = res.data.data
            })
        }
    }
}
</script>

<style scoped lang="scss">
.page-container {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    .images {
        width: 200vw;
        padding: 20px;
        padding-left: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        .image-item {
            width: 10vw;
            height: 80vh;
            display: flex;
            flex-direction: column;
            margin: 0 20px 20px 0;
            transform: rotateX(15deg) rotateY(0deg) rotateZ(12deg);
            box-shadow: 0 0 30px #ccc;

            &:hover {
                box-shadow: 0 0 40px gray;
            }
            .body {
                width: 100%;
                height: 100%;
                position: relative;

                .id {
                    position: absolute;
                    min-width: 20px;
                    height: 20px;
                    left: 10px;
                    top: 10px;
                    padding: 0 5px;
                    background-color: #4a5568;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    border-radius: 2px;
                }
                .image {
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-position: center;
                    &:hover {
                        cursor: pointer;
                    }
                }

                .footer {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 44px;
                    width: 100%;
                    background-color: #323232;
                    opacity: 0.5;
                    display: none;
                    flex-direction: row;

                    .item {
                        width: 50%;
                        color: white;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .pagination {
        position: fixed;
        left: calc(15vw + 30px);
        bottom: 10px;
    }
}
.preview {
    display: flex;
    flex-direction: column;

    .preview-image {
        width: 50vw;
        height: 80vh;
        background-position: center;
        background-size: cover;
    }
    .preview-base64 {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
</style>
